<script setup>
import { ref,onMounted } from 'vue';
import { useUserStore } from "../../store/user.js";
import {
  addCourseApi,
  getCourseNameApi,
  getCourseListApi,
  deleteCourseApi,
  updateCourseApi,
} from "../../api/course.js";

onMounted(()=>{
  GetCourseList();
})
// 假设需要一些数据或方法，这里仅做示例
const userStore = useUserStore();
const courseList = ref([]);

const addCourseDialogVisible = ref(false);
const editCourseDialogVisible = ref(false);
const deleteCourseDialogVisible = ref(false);

const CourseData = ref({
  course_id: '',
  course_name: '',
  create_user: userStore.userInfo.id,
  create_user_username: userStore.userInfo.username
});

const CourseDataEditor = ref({});
const GetCourseList = async ()=>{
  const {data:res} = await getCourseListApi()
  courseList.value = res.data
};


const addCourse = async () => {
  // 添加课程逻辑
  addCourseDialogVisible.value = false;
  console.log(CourseData.value)
  const {data:res} = await addCourseApi(CourseData.value)
  if(res.code == 200){
    ElMessage.success('添加成功')
    GetCourseList();
    CourseData.value.course_id = ''
    CourseData.value.course_name = ''
  }
};

const Edit = async () => {
  // 编辑课程逻辑
  editCourseDialogVisible.value = false;
  const {data:res} = await updateCourseApi(CourseDataEditor.value.value)
  console.log(res.data)
  if(res.code == 200){
    ElMessage.success('编辑成功')
    GetCourseList();
  }
};
const CourseDataDelete=ref({})
const userDelete = async () => {
  // 删除课程逻辑
  deleteCourseDialogVisible.value = false;
  const {data:res} = await deleteCourseApi(CourseDataDelete.value.value.course_id)
  if(res.code == 200){
    ElMessage.success('删除成功')
    GetCourseList();
  }
};

const searchCourseName = ref('');
const Reset = () => {
  // 重置搜索逻辑
  searchCourseName.value = '';
  searchCreateUser.value = '';
};

const Search = async () => {
  console.log(searchCourseName.value)
  const {data:res} = await getCourseNameApi(searchCourseName.value)
  courseList.value = res.data
  console.log(res.data)
  if(res.data.length==0){
    ElMessage({
      message: '无数据',
      type: 'error',
    })
  }else {
    Reset()
    GetCourseList();
    ElMessage({
      message: '查找成功',
      type: 'success',
    })
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-row>
        <!-- 搜索框 --->
        <el-col :span="5">
          <el-form :model="searchCourseName" label-width="80px">
            <el-form-item label="课程名称">
              <el-input v-model="searchCourseName" placeholder="请输入课程名称" />
            </el-form-item>
          </el-form>
        </el-col>


        <el-col :span="2">
          <el-button type="primary" @click="Search" style="margin-left: 20px">搜索</el-button>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" @click="Reset">重置</el-button>
        </el-col>

        <el-col :span="10">
          <el-form></el-form>
        </el-col>
      </el-row>
      <!-- 操作 --->
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addCourseDialogVisible = true">添加课程</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="DeleteAll">批量删除</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">更多操作</el-button>
        </el-col>
        <el-col :span="18">
          <el-form></el-form>
        </el-col>
      </el-row>

      <!-- 课程列表 --->
      <el-card style="margin-top: 20px">
        <el-table :data="courseList" style="width: 100%">
          <el-table-column prop="course_id" label="课程ID" width="180" />
          <el-table-column prop="course_name" label="课程名称" width="180" />
          <el-table-column prop="create_user_username" label="创建人" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="editCourseDialogVisible = true;CourseDataEditor.value={...scope.row}">
                查看
              </el-button>
              <el-button
                  size="small"
                  type="danger"
                  plain
                  @click="deleteCourseDialogVisible=true;CourseDataDelete.value={...scope.row}"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>

    <!-- 添加课程对话框 -->
    <el-dialog title="添加课程" v-model="addCourseDialogVisible" width="30%">
      <el-form :model="CourseData">
        <el-form-item label="课程名称" label-width="120px">
          <el-input v-model="CourseData.course_name"></el-input>
        </el-form-item>
        <el-form-item label="创建人" label-width="120px">
          <el-input v-model="CourseData.create_user_username" disabled></el-input>
        </el-form-item>
        <!-- 其他表单项... -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addCourseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addCourse">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑课程对话框 -->
    <el-dialog title="编辑课程" v-model="editCourseDialogVisible" width="30%">
      <el-form :model="CourseDataEditor">
        <el-form-item label="课程名称" label-width="120px">
          <el-input v-model="CourseDataEditor.value.course_name"></el-input>
        </el-form-item>
        <el-form-item label="创建人" label-width="120px">
          <el-input v-model="CourseDataEditor.value.create_user_username" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editCourseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="Edit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除课程对话框 -->
    <el-dialog title="提示" v-model="deleteCourseDialogVisible" width="30%">
      <el-form>
        <el-form-item label="确定删除该课程吗？" label-width="120px">
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteCourseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="userDelete">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
